<!--新建投诉建议-->
<template>
  <div class="complainFormContainer">
    <!--头部bar开始-->
    <van-sticky>
      <CommonBar :options="options"></CommonBar>
    </van-sticky>
    <!--头部bar结束-->
    <van-form>
      <van-field
        v-model="complaints"
        label="投诉人："
        placeholder="请填写投诉人"
        required
        :disabled="detailStatus == 2||detailStatus == 1?true:false"
      />
      <van-field
        v-model="phone"
        label="联系方式："
        placeholder="请填写联系方式"
        type="number"
        required
        :disabled="detailStatus == 2||detailStatus == 1?true:false"
      />
      <van-field
        v-model="address"
        label="投诉地址"
        placeholder="请填写投诉地址"
        type="textarea"
        required
        :disabled="detailStatus == 2||detailStatus == 1?true:false"
      />
      <van-field
        v-model="content"
        label="投诉内容："
        placeholder="请填写投诉内容"
        type="textarea"
        required
        :disabled="detailStatus == 2||detailStatus == 1?true:false"
      />

      <van-field
        v-model="processing_conditions"
        label="处理情况："
        placeholder="请填写处理情况"
        type="textarea"
        v-show="addparams!=1 && detailStatus!=1"
        required
        :disabled="detailStatus == 3?true:false"
      />
      <div style="padding:0 16px " v-show="addparams!=1 && detailStatus!=1">
        <p class="imagetitle">
          <span>现场照片：</span>
          <button @click="takephoto" v-if="detailStatus == 2">上传图片</button>
        </p>
        <van-action-sheet v-model="takephotoshow" :actions="actions" @select="takephotoSelect" />
        <div class="imgdiv" v-for="(item, index) in image" :key="index">
          <img :src="item" alt class="imga" @click="viewImg(index)" fit="cover" />
          <van-icon
            name="clear"
            class="closeicon"
            @click="todelet(index)"
            v-if="detailStatus == 2"
          />
        </div>
      </div>
    </van-form>
    <!--新建按钮-->
    <div class="cleanerCheckBut">
      <button class="newbut" @click="submit" v-if="addparams==1 ||detailStatus == 2">提交</button>
      <button class="newbut" @click="knowsubmit" v-if="detailStatus == 1">我知道了</button>
    </div>
  </div>
</template>
<script>
import CommonBar from "../common/commonBar";
import { compressImage } from "../common/compressImage";
import { mapState } from "vuex";
import { Dialog } from "vant";
import { ImagePreview } from "vant";
export default {
  components: {
    CommonBar
  },
  computed: {
    ...mapState({
      token: state => state.Authorization
    })
  },
  data() {
    return {
      options: {
        centerText: "投诉建议",
        type: "icon",
        iconNname: "wap-home",
        lefttype: "left"
      },
      //拍照
      //相机
      actions: [
        { name: "相机", id: "1" },
        { name: "图库", id: "2" },
        { name: "取消", id: "3" }
      ],
      takephotoshow: false,
      image: [],
      complaints: "",
      phone: "",
      content: "",
      processing_conditions: "",
      addparams: "",
      detailItem: "",
      detailStatus: "",
      detailId: "",
      address: ""
    };
  },
  created() {
    this.addparams = this.$route.query.add;
    this.detailStatus = this.$route.query.status;
    //console.log("zhuang", this.detailStatus);
    this.detailId = this.$route.query.id;
  },
  mounted() {
    if (this.detailStatus != undefined && this.detailId != undefined) {
      this.ComplaintsDetail();
    }
  },
  methods: {
    //我知道了提交按钮
    knowsubmit() {
      var params = {
        id: this.detailId,
        token: this.token
      };
      this.$toast.loading({
        mask: true,
        message: "加载中..."
      });
      this.$http
        .post(
          `${this.$basePath}?service=App.ComplaintsSuggestions.EditStatus&api=89`,
          params
        )
        .then(res => {
          if (res.ret == 200) {
            this.$toast.clear();
            this.$router.push({
              //核心语句
              path: "/home" //跳转的路径
            });
          } else {
            this.$toast({ message: res.msg });
          }
        });
    },
    submit() {
      if (this.addparams == 1) {
        this.SubmitComplaints();
      } else if (this.detailStatus == 2) {
        this.ProcessingComplaints();
      }
    },
    //提交投诉信箱
    SubmitComplaints() {
      if (this.complaints.length == 0) {
        this.$toast({ message: "请输入投诉人姓名" });

        return false;
      }

      if (this.phone.length == 0) {
        this.$toast({ message: "手机号码不能为空！" });

        return false;
      }
      if (this.phone.length != 11) {
        this.$toast({ message: "请输入有效的手机号码" });
        return false;
      }

      var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
      if (!myreg.test(this.phone)) {
        this.$toast({ message: "请输入有效的手机号码！" });
        return false;
      }
      if (this.content.length == 0) {
        this.$toast({ message: "请输入投诉人内容" });
        return false;
      }
      var params = {
        complaints: this.complaints,
        phone: this.phone,
        token: this.token,
        content: this.content,
        address: this.address
      };
      this.$toast.loading({
        mask: true,
        message: "加载中..."
      });
      this.$http
        .post(
          `${this.$basePath}?service=App.ComplaintsSuggestions.SubmitComplaints&api=89`,
          params
        )
        .then(res => {
          if (res.ret == 200) {
            this.$toast.clear();
            this.$router.push({
              //核心语句
              path: "/home" //跳转的路径
            });
          } else {
            this.$toast({ message: res.msg });
          }
        });
    },
    //处理投诉建议
    ProcessingComplaints() {
      if (
        this.processing_conditions == null ||
        this.processing_conditions.length == 0
      ) {
        this.$toast({ message: "请输入处理情况" });
        return false;
      }
      var params = {
        processing_conditions: this.processing_conditions,
        id: this.detailId,
        token: this.token,
        image: this.image
      };
      this.$toast.loading({
        mask: true,
        message: "加载中..."
      });
      this.$http
        .post(
          `${this.$basePath}?service=App.ComplaintsSuggestions.ProcessingComplaints&api=89`,
          params
        )
        .then(res => {
          if (res.ret == 200) {
            this.$toast.clear();
            this.$router.push({
              //核心语句
              path: "/home" //跳转的路径
            });
          } else {
            this.$toast({ message: res.msg });
          }
        });
    },
    //获取详情
    ComplaintsDetail() {
      var params = {
        id: this.detailId,
        token: this.token
      };
      this.$toast.loading({
        mask: true,
        message: "加载中..."
      });
      this.$http
        .post(
          `${this.$basePath}?service=App.ComplaintsSuggestions.ComplaintsDetail&api=89`,
          params
        )
        .then(res => {
          if (res.ret == 200) {
            this.$toast.clear();
            this.complaints = res.data.complaints;
            this.phone = res.data.phone;
            this.content = res.data.content;
            this.address = res.data.address;
            this.processing_conditions = res.data.processing_conditions;
            if (res.data.image != null) {
              this.image = res.data.image;
            }
          } else {
            this.$toast({ message: res.msg });
          }
        });
    },
    /**照片 */
    takephoto() {
      this.takephotoshow = true;
    },
    //选中图片方式，1是相机，2是图库
    takephotoSelect(item) {
      this.takephotoshow = false;
      if (item.id == 3) {
        this.$toast({ message: "取消上传图片" });
      } else if (this.image && this.image.length >= 9) {
        this.$toast({ message: "不能上传超过9张" });
      } else {
        this.cameraTakePicture(item.id); //调用相机
      }
    },
    //拍照

    cameraTakePicture(mySourceType) {
      //把缓存里的takephoto里的丢进onsuces
      let that = this;
      navigator.camera.getPicture(onSuccess, onFail, {
        quality: 50,
        destinationType: Camera.DestinationType.DATA_URL,
        encodingType: Camera.EncodingType.JPEG,
        sourceType: mySourceType
      });

      function onSuccess(imageData) {
        var imageurl = "data:image/jpeg;base64," + imageData;
        var str = imageData;
        var equalIndex = str.indexOf("=");
        if (str.indexOf("=") > 0) {
          str = str.substring(0, equalIndex);
        }
        var strLen = str.length;
        var fileSize = strLen - (strLen / 8) * 2;
        var size = (fileSize / 1024).toFixed(2);
        if (parseInt(size) > 1024) {
          compressImage(imageurl, {
            width: 200, // 压缩后图片的宽
            quality: 0.4 // 压缩后图片的清晰度，取值0-1，不传默认为0.7，值越小，所绘制出的图像越模糊
          }).then(result => {
            that.image.push(result);
          });
        } else {
          that.image.push(imageurl);
        }
      }
      function onFail(message) {
        this.$toast({ message: message });
      }
    },
    //图片预览
    //显示图片弹窗
    viewImg(index) {
      var that = this;
      var images = this.image;
      ImagePreview({
        images,
        startPosition: index,
        closeable: true
      });
    },
    //删除图片
    todelet(index) {
      Dialog.confirm({
        title: "提示",
        message: "是否删除该照片"
      })
        .then(() => {
          this.image.splice(index, 1);
        })
        .catch(() => {
          // on cancel
        });
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../assets/css/home";
</style>